<template>
  <div class="table-header-comp">
    <div class="item" v-for="(item, index) in headerYear" :key="index">
      <div class="title">{{ item }}</div>
      <ul>
        <li v-for="(item, i) in 12" :key="i">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    startDate: {
      type: String,
      default: ''
    },
    endDate: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

    };
  },
  computed: {
    headerYear() {
      const startYear = new Date(this.startDate || new Date()).getFullYear();
      const endYear = new Date(this.endDate || new Date()).getFullYear();
      const year = Math.abs(endYear - startYear);
      if (year === 0) return [endYear];
      const result = [];
      for (let i = 0; i <= year; i++) {
        result.push(startYear + i);
      }
      return result;
    }
  }
};
</script>

<style lang="scss" scoped>
  @import "../../../assets/styles/main";

  .table-header-comp {
    width: 100%;
    height: 100%;
    display: flex;
    .item {
      height: 60px;
      width: 372px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        width: 100%;
        height: 30px;
        font-size: 20px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #bac4ff;
        border-bottom: none;
      }
      ul {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid $mainColor;
        border-bottom: 1px solid $mainColor;
        li {
          width: 30px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          border-left: 1px solid $mainColor;
          &:nth-last-child(1) {
            border-right: 1px solid $mainColor;
          }
        }
      }
    }
  }
</style>
